<template>
  <div>
    子组件：props define组件。
    <div>
      <div v-for="item in userList" :key="item.id">
        <div>{{ item.id }} -- {{ item.name }} -- {{ item.age }} 写item.的时候，没有语法提示。</div>
      </div>
    </div>
    <div>
      <button @click="handleChange">子组件修改</button>
    </div>
  </div>
</template>
<script setup lang="ts">
// 方式1：只接收。父组件传错了，也看不出来。1.这种写法没有类型限制。2.也没有默认值。
// const props = defineProps(['userList'])

import type { PersonInter } from '@/types/demo.ts'

// 方式2：类似vue2的方式：
/*const props = defineProps({
  userList: {
    // as的时候，是函数，返回值。
    type: Array as () => PersonInter[],
    // default() {
    //   return []
    // },
    default: () => [],
  },
})*/

/*const props = defineProps<{
  // 这么写：默认就是必须要传
  userList: PersonInter[],
  // userList?: PersonInter[], // 可选了，可以不传。
}>()*/

const props = withDefaults(
  defineProps<{
    // 默认就是必填。加上？就是非必填。
    userList: PersonInter[]
  }>(),
  {
    userList: ()=> []
  }
)

console.log('props01-props:', props)

// props双向改：不建议这么写
const handleChange = () => {
  props.userList[1].name = '王六'
}
</script>

<style scoped></style>
